/*!
 * Copyright 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// Colorpicker
.k-colorpicker {
    .k-picker-wrap {
        line-height: calc(@input-height + @input-padding-y*2);
    }

    .k-selected-color {
        vertical-align: top;
        display: inline-block;
        height: calc(@input-height + .35em);
        width: calc(@input-height + .35em);
        .k-i-line {
            font-size: 2em;
            color: #FF525E;
            display: inline-block;
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        .k-i-line:before {
            content: "\e510";
        }
    }
    .k-tool-icon {
        position: relative;
        top: -2px;
        display: inline-block;
        padding: 3px 3px 2px;
        margin-right: 3px;
        margin-left: 2px;
        margin-bottom: 3px;
        background-repeat: no-repeat;
        vertical-align: middle;
        width: @grid-size;
        height: @grid-size;
        .disable-high-contrast();
        .k-selected-color {
            display: block;
            height: 3px;
            width: @grid-size;
            position: absolute;
            left: 3px;
            bottom: -3px;
            border-radius: 0 !important;
        }
    }
    .k-select {
        cursor: pointer;
    }
    .k-picker-wrap .k-icon {
        overflow:visible;
    }
}




// Flat color picker
.k-flatcolorpicker {
    position: relative;
    display: inline-block;
    width: 265px;
    padding-bottom: 5px;

    & {
        background-color: transparent;
        background-image: none;
    }

    .k-selected-color {
        background-image: url("../textures/transtexture.png");
        background-position: 50% 50%;
        text-align: right;

        input.k-color-value {
            font-family: Consolas,"Ubuntu Mono","Lucida Console","Courier New",monospace;
            padding: .75em .1em .65em .1em;
            border: 0;
            margin: 0;
            width: 84%;
        }
        .k-color-input {
            background-color: #fff;
            display: inline-flex;
            width: 84%;
            text-align: left;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
        }
        .k-clear-color {
            padding: .4em;
            line-height: 0;
            .k-i-reset-color:before {
                color: #000;
                opacity: 0.8;
            }
            .k-i-reset-color:hover,
            .k-i-reset-color:active {
                opacity: 1;
            }
        }
    }

    .k-clear-color-container .k-clear-color.k-state-focused:active {
        color: inherit;
    }
    .k-clear-color-container .k-clear-color:active {
        color: #000;
        opacity: 1;
    }
    .k-selected-color .k-clear-color,
    .k-clear-color-container .k-clear-color {
        .k-i-reset-color {
            background-image: none;
        }
    }

    .k-clear-color-container {
        text-align: left;
    }

    .k-hsv-rectangle {
        position: relative;
        .prohibit-selection;
        -ms-touch-action: pinch-zoom double-tap-zoom;
        .k-draghandle {
            cursor: pointer;
            position: absolute;
            z-index: 10;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            border: 1px solid #eee;
            margin-left: -5px;
            margin-top: -5px;
            border-radius: 6px;
            .box-shadow(0, 1px, 2px, #444);
            background: transparent;
            &:hover, &:focus {
                background: transparent;
                border-color: #fff;
                .box-shadow(0 1px 5px #000);
            }
        }
        &.k-dragging, &.k-dragging * {
            cursor: none;
        }
    }

    .k-slider-horizontal {
        height: 20px;
        width: 90%;
        margin: 0 5%;
        .k-slider-track {
            .box-shadow(~"0 1px 0 #fff, 0 -1px 0 #999");
        }
    }

    .k-hue-slider, .k-transparency-slider {
        display: block;
        .k-slider-selection {
            background: transparent;
        }
        .k-draghandle {
            background: transparent;
            border: 3px solid #eee;
            margin-top: 1px;
            height: 8px;
            width: 8px;
            .box-shadow(0 1px 4px #444);
            &:hover, &:focus {
                background: transparent;
                border-color: #fff;
                .box-shadow(0 1px 5px #000);
                border-width: 2px;
                padding: 1px;
            }
        }
    }

    .k-hue-slider {
        .k-slider-track {
            background: linear-gradient(to right,  #ff0000 0%, #ffff00 16%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 84%, #ff0004 100%);
        }
    }

    .k-transparency-slider {
        .k-slider-track {
            background-image: url("../textures/transparency.png");
            background-size: 100% auto;
            background-position: 100% 50%;
            background-repeat: no-repeat;
        }
    }

    .k-controls {
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: center;
        font-size: 90%;
        .k-button {
            width: 6em;
        }
    }

    .k-hsv-gradient {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%), linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        height: 180px;
        margin-bottom: 5px;
    }

    .k-ie9 & {
        .k-hue-slider {
            .k-slider-track {
                background: url();
            }
        }
        .k-hsv-gradient {
            background:
            url(),
            url();
        }
    }
}




// Color palette
.k-colorpalette {
    position: relative;
    line-height: 0;
    border-width: 0;
    display: inline-block;

    .k-palette {
        border-collapse: collapse;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .k-item {
        width: 14px;
        height: 14px;
        overflow: hidden;
        .disable-high-contrast();

        &.k-state-selected,
        &.k-state-selected:hover {
            z-index: 100;
            background: transparent;
            box-shadow: 0 1px 3px 1px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.45);
            position: relative;
        }
    }

    .k-item:hover {
        z-index: 101;
        position: relative;
        box-shadow: 0 1px 3px 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.3);
    }
}
